<template>
  <div :class="[$store.state.appPrefix + '-c-bread']">
    <el-breadcrumb  separator="/" :class="[$store.state.appPrefix + '-c-bread']">
      <template v-for="(item, index) in breadData">
        <el-breadcrumb-item v-if="index !== breadData.length - 1 && item.hasChildren === false" :to="{path: item.menuUrl}" :key="item.id">{{ item.menuName || item.text }}</el-breadcrumb-item>
        <span v-else :key="item.id" class="el-breadcrumb__item">
          <span role="link" class="el-breadcrumb__inner">{{ item.menuName || item.text }}</span>
          <span role="presentation" class="el-breadcrumb__separator">/</span>
        </span>
      </template>
    </el-breadcrumb>
  </div>
</template>
<script>
import { matchBreadData, addNotMatchedBreadData } from './models'

export default {
  name: 'PageBreadcrumbHeader',
  components: {},
  data() {
    return {
      breadData: []
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      deep: true,
      handler(val) {
        const meta = this.$route.meta
        const currentPath = meta.notMatchedMenu === true ? meta.menuPath : val
        this.breadData = matchBreadData(currentPath, this.$store.state.leftMenu.menuList)
        addNotMatchedBreadData(this.$route, this.$router.options.routes, this.breadData)
        if (meta.notMatchedMenu === true) {
          this.breadData.push({
            menuName: meta.title,
            id: 'not-matched-' + this.$route.name
          })
        }
      }
    }
  },
  computed: {
  },
  methods: {
  },
  created() {
  },
  mounted() {
  }
};
</script>
